<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <%- include('header') %>
    <%- include('menu') %>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>干洗中心管理</legend>
            </fieldset>

            <form name="form1" class="layui-form" action="">

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索</label>
                        <div class="layui-input-inline" style="width: 250px;">
                            <input type="text" name="search" id="search" placeholder="中心名称/负责人姓名/联系手机" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">是否开业</label>-->
                        <!--<div class="layui-input-inline">-->
                            <!--<select name="status" id="status" lay-filter="status">-->
                                <!--<option value="">全部</option>-->
                                <!--<option value="0">开业中</option>-->
                                <!--<option value="1">歇业中</option>-->
                            <!--</select>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>

                <table class="layui-hide" id="tablediv" lay-filter="tablediv"></table>
            </form>

            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">

                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="search">查询数据</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="tonew">新增</button>
                </div>
            </script>

            <script type="text/html" id="opdiv">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="checkboxTpl">
                <input type="checkbox" name="lock" value="{{d.id}}" title="开业" lay-filter="lockDemo" {{ d.status == '0' ? 'checked' : '' }}>
            </script>


        </div>
    </div>


    <%- include('footer') %>
</div>
<%- include('script') %>

<script>
    var table;
    var form;
    var vm = new Vue({
        el: '#app',
        data:function() {
            return {
            }
        },
        mounted: function () {
            var self = this;
            layui.use(['element', "table", 'form', 'laytpl'], function () {

                var laytpl = layui.laytpl,
                    element = layui.element;
                table = layui.table
                form = layui.form;

                table.render({
                    elem: "#tablediv",
                    url: "/admin/center",
                    toolbar: '#toolbar',
                    cols: [
                        [
                            {
                                field: "name",

                                title: "中心名称"
                            },
                            {
                                field: "realname",

                                title: "负责人姓名"
                            },
                            {
                                field: "phone",

                                title: "联系手机"
                            },
                            {
                                field: "province",

                                title: "省市"
                            },
                            {
                                field: "address",

                                title: "具体地址"
                            },
                            {
                                fixed: 'right',
                                title: '操作',
                                toolbar: '#opdiv',
                                width: 300
                            }
                        ]
                    ],
                    page: true,
                });

                //监听锁定操作
                form.on('checkbox(lockDemo)', function(obj){
                    let status;
                    let msg;
                    if(obj.elem.checked){
                        status = '0';
                        msg = '开业成功'
                    }else{
                        status = '1';
                        msg = '歇业成功'
                    }
                        $.ajax({
                            url:'/admin/center/'+obj.value+'/edit',
                            type:'GET',
                            data:{
                                status:status
                            },
                            success:(res)=>{
                                if(res.code === 200){
                                    layer.msg(msg,{icon:1})
                                }else{
                                    layer.msg('失败：'+res.error+' -- '+res.code,{icon:2});
                                }
                            }
                        });
                });

                table.on('toolbar(tablediv)', function (obj) {
                    if (obj.event === 'tonew') {
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['1000px', '500px'],
                            anim: 2,
                            content: ['/admin/center/tonew'], //iframe的url，no代表不显示滚动条
                            end: function () { //
                            }
                        });
                    }
                })

                table.on('tool(tablediv)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'del') {
                        layer.confirm('删除此中心将导致旗下门店、人员等无法使用', function (index) {
                            $.ajax({
                                url:'/admin/center/'+data.id,
                                type:'Delete',
                                data:{},
                                success:(res)=>{
                                    if(res.code === 200){
                                        layer.close(index);
                                        layer.msg('删除成功！',{icon:1});
                                        table.reload('tablediv',{
                                            where:{}
                                        });
                                    }else{
                                        layer.msg('删除失败：'+res.error+' -- '+res.code,{icon:2});
                                    }
                                }
                            });
                        });
                    } else if (obj.event === 'edit') {
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['1000px', '600px'],
                            anim: 2,
                            offset: '20px',
                            content: ['/admin/center/toedit?id=' + data.id], //iframe的url，no代表不显示滚动条
                            end: function () { //此处用于演示
                            }
                        });
                    } else if (obj.event === 'view') {
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['1000px', '600px'],
                            anim: 2,
                            offset: '20px',
                            content: ['/admin/center/todetail?id=' + data.id], //iframe的url，no代表不显示滚动条
                            end: function () { //此处用于演示
                            }
                        });
                    }
                });
                //查询按钮
                form.on('submit(search)', function (data) {
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                            search: data.field.search,
                            // status: data.field.status
                            //…
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false;
                });
                //查询按钮
                form.on('select(status)', function (data) {
                    var search = $("#search").val();
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                            // status:data.value,
                            search:search
                            //…
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    return false;
                });
            })
        },
        methods: {
            iframeclose: function () {
            },
            iframesave: function () {
                table.reload('tablediv', {
                    where: { //设定异步数据接口的额外参数，任意设
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            },
            iframeupdate: function () {
                table.reload('tablediv', {
                });
            },
        }
    })
</script>
</body>

</html>
